<template>
	<view :style="`min-height:10px;width:${getWidth(span)};padding:2px 2px;display:flex;justify-content:${getAlign(align)};align-items: ${getVertical(vertical)};flex-direction:${direction}`">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			getWidth(){
				return (val) => {
					let w = ''
					switch (parseInt(val)){
						case 24:
							w = '100%';
							break;
						case 12:
							w = '50%';
							break;
						case 8:
							w = 100/3 +'%'
							break;
						case 6:
							w ='25%;'
							break;
						case 4:
							w = 100/6 +'%';
							break;
					}
					return w
				}
			},
			getAlign(){
				return (val) => {
					let w = ''
					switch (val){
						case 'center':
							w = 'center';
							break;
						case 'end':
							w = 'flex-end';
							break;
						default:
							w = 'flex-start';
							break;
					}
					return w
				}
			},
			getVertical(){
				return (val) => {
					let w = ''
					switch (val){
						case 'center':
							w = 'center';
							break;
						case 'end':
							w = 'flex-end';
							break;
						default:
							w = 'flex-start';
							break;
					}
					return w
				}
			},
		},
		props:{
			span:{
				type:Number,
				default:4
			},
			align:{
				type:String,
				default:'start'
			},
			direction:{
				type:String,
				default:'row'
			},
			vertical:{
				type:String,
				default:'start'
			},
		},
		methods: {
			
		}
	}
</script>

<style>
.s{
	flex-direction:column ;
	vertical-align: ;
	justify-content: ;
	align-items: ;
}
</style>
